export const commonMixin = {
  data() {
    return {
      /**
       * 连线参数
       */
      jsplumbConnectOptions: {
        isSource: true,
        isTarget: true,
        // 动态锚点、提供了4个方向 Continuous、AutoDefault
        anchor: "Continuous",
        // 设置连线上面的label样式
        labelStyle: {
          cssClass: "flowLabel"
        },
        // 修改了jsplumb 源码，支持label 为空传入自定义style
        emptyLabelStyle: {
          cssClass: "emptyFlowLabel"
        }
      },
      /**
       * 源点配置参数
       */
      jsplumbSourceOptions: {
        // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
        filter: ".flow-node-drag",
        filterExclude: false,
        anchor: "Continuous",
        // 是否允许自己连接自己
        allowLoopback: false,
        maxConnections: -1,
        onMaxConnections: function(info, e) {
          // console.log(`超过了最大值连线: ${info.maxConnections}`)
        }
      },
      jsplumbTargetOptions: {
        // 设置可以拖拽的类名，只要鼠标移动到该类名上的DOM，就可以拖拽连线
        filter: ".flow-node-drag",
        filterExclude: false,
        // 是否允许自己连接自己
        anchor: "Continuous",
        allowLoopback: false,
        dropOptions: { hoverClass: "ef-drop-hover" }
      }
    };
  },
  methods: {
    getUUID() {
      // 后端需要的ID需要以字母开头
      return `Flow${Math.random().toString(36).substr(3, 10)}`
    },
    /**
     *  删除的是分支节点，把子节点一并删除掉
     *  删除对应的formSetting
     *  warn:如果删除的是分支节点，请先删除子分支节点后再删除父分支节点，防止断开连线后，找不多对应子分支节点
     * @param deleteBranchNode 是否删除当前节点相关连线，（直接通过删除按进行删除，删除对应连线，通过分支节点设置的删除，保留父分支节点与上一级的连线关系）
     */
    deleteBranchNode(nodeId, deleteBranchNode = true) {
      const childIdArr = this.getChildId(nodeId);
      this.data.nodeList = this.data.nodeList.filter(
        ({ id }) => !childIdArr.includes(id)
      );
      childIdArr.forEach(childId => {
        this.jsPlumb.removeAllEndpoints(childId);
        this.$delete(this.formSetting, childId);
      });
      if (deleteBranchNode) {
        this.jsPlumb.removeAllEndpoints(nodeId);
      }
      this.$delete(this.formSetting, nodeId);
    },
    // 当前节点下的所有子节点Id
    getChildId(parentId) {
      const { lineList } = this.data;
      const childIdArr = [];
      lineList.forEach(({ from, to }) => {
        if (from === parentId) {
          childIdArr.push(to);
        }
      });
      return childIdArr;
    },
        /**
     * 整个节点作为source或者target
     * 规则:
     * 开始节点只能作为输入节点，并且只能连接群组节点
     * 父分支节点只能有一个入口
     * 子分支节点不能连接子分支节点
     * 父分支节点只能作为target节点，无法直接连接其他任何节点，其子分支节点是通过操控JS实现连接。
     * 子分支节点只能接受当前分支节点输入，不能接受其它任何节点输入，其子分支节点是通过操控JS实现与父节点的连接。
     */
    makeSourceTarget({ id, type }) {
      const sourceConnectOneArr = ['start',"tenant", 'tenantChild', 'copyChild', 'randomChild', 'propertyChild', 'timerChild']
      const targetConnectOneArr = ['copy', 'random', 'timer', 'property']
      if (sourceConnectOneArr.includes(type)) {
        this.jsPlumb.makeSource(id, { ...this.jsplumbSourceOptions, ...{ maxConnections: 1 }}) // 设置源点，可以拖出线连接其他节点
      } else if (targetConnectOneArr.includes(type)) {
        this.jsPlumb.makeTarget(id, { ...this.jsplumbTargetOptions, ...{ maxConnections: 1 }})// 设置目标点，其他源点拖出的线可以连接该节点
      }  else if (type === 'end'|| type === 'exclusion') {
        this.jsPlumb.makeTarget(id, this.jsplumbTargetOptions)
      } else {
        this.jsPlumb.makeSource(id, this.jsplumbSourceOptions)
        this.jsPlumb.makeTarget(id, this.jsplumbTargetOptions)
      }
      this.jsPlumb.draggable(id, {
        containment: 'parent',
        stop: function(el) {
          // console.log("停止拖拽", el);
        }
      })
    }
  }
};
